<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        code,
        pre {
            background-color: #f4f4f4;
        }

        pre {
            border-left: 6px solid #005282;
            font-size: 1rem;
            line-height: 1.4;
            margin: 0 0 24px;
            max-width: 100%;
            overflow: auto;
            padding: 24px 0 0;
            width: 100%;
        }
        p.ex1 {
            /* 设置了大小和字体 */
            font: 15px arial, sans-serif;
        }

        p.ex2 {
            /* 设置了斜体，加粗，大小/行高 字体 */
            font: italic bold 12px/30px Georgia, serif;
        }
        p.ex3 {
            font-variant: small-caps;
        }
        span {
            color: red;
        }
    </style>
</head>

<body>
    <h3>font属性</h3>
    <pre>
    <code>
        p.ex1 {
            /* 设置了大小和字体 */
            font: 15px arial,sans-serif;
        }
        p.ex2 {
            /* 设置了斜体，加粗，大小/行高 字体 */
            font:italic bold 12px/30px Georgia,serif;
        }
    </code>
    </pre>
    <p class="ex1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus, numquam ab. Molestiae dignissimos
        sit porro aliquam natus nemo ut animi eos, repellendus commodi in amet laborum placeat accusantium sapiente
        quasi repellat! Quaerat placeat magni eveniet assumenda aut in dolorem doloremque porro excepturi, architecto
        repellat repellendus neque beatae tempore quos id.</p>
    <p class="ex2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate vel earum assumenda molestiae
        veniam est nostrum nulla commodi? Laborum recusandae possimus obcaecati ipsam ducimus laboriosam perferendis
        nostrum debitis tenetur natus iusto optio id iste totam, consequuntur exercitationem. Doloremque, iure? At quia
        cumque culpa consectetur quis aliquid provident? Deserunt, laudantium tempora?</p>
    
    <br>
    <h3>font-varient: small-caps;</h3>
    <p class="ex3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio tempore dolor, minima blanditiis, debitis aut nesciunt totam, sapiente in possimus sit unde dolore alias eos autem praesentium quis animi expedita?</p>
    
    <br>
    <h3>font-weight</h3>
    <p style="font-weight: 100;"><span>font-weight: 100;</span>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
    <p style="font-weight: 200;"><span>font-weight: 200;</span>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
    <p style="font-weight: 300;"><span>font-weight: 300;</span>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
    <p style="font-weight: 400;"><span>font-weight: 400;</span>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
    <p style="font-weight: 500;"><span>font-weight: 500;</span>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
    <p style="font-weight: 600;"><span>font-weight: 600;</span>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
    <p style="font-weight: 700;"><span>font-weight: 700;</span>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
    <p style="font-weight: 800;"><span>font-weight: 800;</span>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
    <p style="font-weight: 900;"><span>font-weight: 900;</span>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
    <p style="font-weight: normal;"><span>font-weight: normal;</span>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
    <p style="font-weight: bold;"><span>font-weight: bold;</span>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
</body>

</html>